<template>
    <div id="textList">
         <span class="title">{{ newList.headerTitle }}</span>
         <el-divider class="divider"></el-divider>
         <div class="content" v-if="newList.innerContent">
            <div class="innerContent" v-for="(item,index) in newList.innerContent" :key="index">
                 <div class="innerContentTitle">{{ item.title }}</div>
                    <div v-if="item.img" class="img" v-html="item.img"></div>
                 <div class="innerContentgCon" v-html="item.content"></div>
            </div>
         </div>
    </div>
</template>

<script>
    import { Divider } from 'element-ui'
    export default {
        props:{
            list:{
                type:Object,
                required: true
            }
        },
        components:{ ElDivider:Divider },
        data(){
            return {
                newList:[]
            }
        },
        created(){
           this.newList = this.list
           console.log(this.newList)
        },
        watch:{
            list( newData , old ){
                this.newList = newData
            }
        } 
    }
</script>

<style lang="stylus" scoped>
#textList
  width 100%
  overflow hidden
  .divider
    width: 98%;
    margin 12px 0 20px 0px
  .title
     color #333333
     font-size 18px
  .content
    .innerContent
       padding-botom 20px
       box-sizing border-box
       margin-bottom 35px
      .innerContentTitle
        color #5E5E5E
        font-size 16px
        font-weight 600
        margin-bottom 10px
      .innerContentgCon
        color #5E5E5E
        font-size 14px
        line-height 25px
   .imgAndMsg
     .imgAndMsgContent
      padding-botom 20px
      box-sizing border-box
      margin-bottom 15px
      .content
        height: 100%;
        color #5E5E5E
        font-size 16px
        font-weight 550
</style>   